<template>
  <div id="box">
    <el-container>
      <el-header style="text-align: left; font-size: 20px"
        >充值中心

        <i class="el-icon-bank-card"></i>
      </el-header>
      <el-main>
        <div id="small">
          <el-form
            :model="ruleForm"
            :rules="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="margin-top: 20px"
          >
            <el-form-item
              label="操作员号"
              style="margin-left: 50px"
              prop="operaId"
              :rules="[{ required: true, message: '该栏不能为空' }]"
            >
              <el-input
                v-model="ruleForm.operaId"
                autocomplete="off"
                placeholder="操作员号"
                disabled="disabled"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="充值卡号"
              style="margin-left: 50px"
              prop="medicalCarId"
              :rules="[{ required: true, message: '该栏不能为空' }]"
            >
              <el-input
                v-model="ruleForm.medicalCarId"
                autocomplete="off"
                placeholder="请输入要充值的卡号"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="充值金额"
              style="margin-left: 50px"
              prop="money"
              :rules="[{ required: true, message: '该栏不能为空' }]"
            >
              <el-input
                v-model="ruleForm.money"
                autocomplete="off"
                placeholder="只能输入数字"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </el-form-item>
          </el-form>
          <div id="numbox">
            <p class="num">100</p>
            <p class="num">200</p>
            <p class="num">500</p>
            <p class="num">1000</p>
            <p class="num">2000</p>
            <p class="num">5000</p>
          </div>
          <div class="button">
            <el-button type="success" round @click="chongzhi">充值</el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        money: "",
        operaId: "2",
      },
    };
  },
  methods: {
    ...mapActions(["chongzhiadd"]),
    chongzhi() {
      console.log(this.ruleForm);
      this.chongzhiadd({
        url:
          "/zsdx-outpatient-service/menzhen/medical-card/charge-money-page/add/one",
        method: "post",
        data: this.ruleForm,
      }).then((data) => {
        if (data == 200) {
          this.$message("充值成功");
        } else {
          this.$message("充值失败");
        }
      });
    },
  },
  mounted() {
    let _this = this;
    $(".num").click(function () {
      _this.ruleForm.money = this.innerHTML;
      console.log(_this.ruleForm.money);
      $(this).siblings("p").removeClass("num1");
      $(this).addClass("num1");
    });
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 100%;
}
.el-input {
  width: 200px;
}
.el-container {
  height: 100%;
}
.num {
  border: 2px solid black;
  height: 40px;
  width: 100px;
  text-align: center;
  line-height: 40px;
  margin: 5px 10px;
}
#box {
  height: 560px;
}
#small {
  border: 1px solid black;
  height: 400px;
  width: 480px;
  margin: auto auto;
}
#numbox {
  display: flex;
  flex-wrap: wrap;
  margin-left: 60px;
}
.button {
  text-align: center;
  margin-top: 20px;
}
.num1 {
  border: 2px solid #337ab7;
  color: #337ab7;
  font-weight: bold;
}
.num:hover {
  cursor: pointer;
}
</style>